<template>
  <div id="app">
    <div id="content">
      <!-- 头部 -->
      <div class="title">
        <h1>火焰报警系统</h1>
      </div>
      <!-- 框 -->
      <div class="bigbox">
        <div class="smillbox"></div>
        <div class="smillbox"></div>
        <div class="smillbox"></div>
      </div>
      <div class="lowerbox">
        <div class="datas">
          <!-- <img src="../assets/images/fire.png" alt=""> -->
        </div>
        <div class="dashboardBox">
          <div class="dashboard_title">
            <h3>电压</h3>
          </div>
          <div class="dashboard">
            <div ref="dashboard1" style="width: 330px; height: 330px"></div>
            <div ref="dashboard2" style="width: 330px; height: 330px"></div>
          </div>
        </div>

        <div class="audioBigBox">
          <!-- <audio  autoplay="autoplay" id="auto" src=""></audio>
                        <input type="button" value="点击播放" onclick="playSound('../assets/mp3/警报声-哔哔哔-错误提示音-综艺节目_爱给网_aigei_com.mp3')"> -->
          <audio
            controls
            loop
            autoplay
            id="audioBoom"
            class="audio-hide"
            src="../assets/mp3/警报声-哔哔哔-错误提示音-综艺节目_爱给网_aigei_com.mp3"
            style="width: 500px; height: 100px"
          ></audio>

          <!-- <button @click="showPicker">歌单</button> -->
          <div class="dropdown">
            <ul class="dropdown-data-style">
              <li v-for="(item, index) in data" :key="index">
                {{ item }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import * as echarts from 'echarts';
import echarts from "echarts";
// const echarts = require("echarts")
// document.getElementById('audioBoom').play() // 播放

// document.getElementById('audioBoom').pause() // 暂停
// $(function(){
//     function playSound(src) {
//     var auto = $("#auto");
//     auto.attr("src",src);
//     }
//     })

export default {
  data() {
    return {
      isShowRouteDropdown: false, //控制选择下拉框是否显示
      data: [
        "情深深雨蒙蒙",
       "苦笑"
      ],
    };
  },

  mounted() {
    this.dashboard1();
    this.dashboard2();
  },
  methods: {
    dashboard1() {
      let dashboard1 = this.$echarts.init(this.$refs.dashboard1);

      dashboard1.setOption({
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 240,
            splitNumber: 12,
            itemStyle: {
              color: "#58D9F9",
              shadowColor: "rgba(0,138,255,0.45)",
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
              length: "75%",
              width: 16,
              offsetCenter: [0, "5%"],
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 18,
              },
            },
            axisTick: {
              splitNumber: 2,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            splitLine: {
              length: 12,
              lineStyle: {
                width: 3,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 30,
              color: "#999",
              fontSize: 10,
            },
            title: {
              show: false,
            },
            detail: {
              backgroundColor: "#fff",
              borderColor: "#999",
              borderWidth: 2,
              width: "60%",
              lineHeight: 40,
              height: 40,
              borderRadius: 8,
              offsetCenter: [0, "35%"],
              valueAnimation: true,
              formatter: function (value) {
                return "{value|" + value.toFixed(0) + "}{unit|km/h}";
              },
              rich: {
                value: {
                  fontSize: 10,
                  fontWeight: "bolder",
                  color: "#777",
                },
                unit: {
                  fontSize: 10,
                  color: "#999",
                  padding: [0, 0, -20, 10],
                },
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
        ],
      });
      // window.addEventListener("resize", function () {
      //     bt01.resize();
      // });
    },
    dashboard2() {
      let dashboard2 = this.$echarts.init(this.$refs.dashboard2);

      dashboard2.setOption({
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 240,
            splitNumber: 12,
            itemStyle: {
              color: "#58D9F9",
              shadowColor: "rgba(0,138,255,0.45)",
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
              length: "75%",
              width: 16,
              offsetCenter: [0, "5%"],
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 18,
              },
            },
            axisTick: {
              splitNumber: 2,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            splitLine: {
              length: 12,
              lineStyle: {
                width: 3,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 30,
              color: "#999",
              fontSize: 10,
            },
            title: {
              show: false,
            },
            detail: {
              backgroundColor: "#fff",
              borderColor: "#999",
              borderWidth: 2,
              width: "60%",
              lineHeight: 40,
              height: 40,
              borderRadius: 8,
              offsetCenter: [0, "35%"],
              valueAnimation: true,
              formatter: function (value) {
                return "{value|" + value.toFixed(0) + "}{unit|km/h}";
              },
              rich: {
                value: {
                  fontSize: 10,
                  fontWeight: "bolder",
                  color: "#777",
                },
                unit: {
                  fontSize: 10,
                  color: "#999",
                  padding: [0, 0, -20, 10],
                },
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
        ],
      });
      // window.addEventListener("resize", function () {
      //     bt01.resize();
      // });
    },
    /* 按钮绑定的方法 */
    showPicker() {
      this.isShowRouteDropdown = !this.isShowRouteDropdown;
    },
  },
};
</script>

<style lang="less" scoped>
html,
body {
  width: 100%;
  height: 100%;
}

#app {
  width: 100%;
  height: 100%;
  background-color: aqua;
}

#content {
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/bg.jpg");
  background-size: 100% 100%;
}

#content .title {
  width: 100%;
  height: 50px;
  background-image: url("../assets/images/header.png");
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 100% 100%;
}

#content .title h1 {
  font-size: 30px;
  color: #fff;
}

#content .bigbox {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}

#content .bigbox .smillbox {
  width: 31.5%;
  height: 100%;
  background-image: url("../assets/images/main_middle.png");
  background-size: 100% 100%;
}

#content .lowerbox {
  width: 100%;
  height: 400px;
  display: flex;
  margin-top: 30px;
  .audioBigBox {
    position: relative;
    width: 31.5%;
    height: 100%;
    margin-left: 38px;
    margin-right: 20px;
    display: flex;
    // background-color: beige;
    justify-content: center;
    align-items: center;
  }
}

#content .lowerbox .datas {
  width: 20%;
  height: 100%;
  margin-left: 22px;
  // background-image: url('../assets/images/fire.png');
  background-size: 100% 100%;
  background-color: beige;
}

#content .lowerbox .dashboard_title {
  flex: 1;
  display: flex;
  width: 100%;
  height: 100px;
  // background-image: url('../assets/images/气压.png') ;
  // background-size: 90% 100%;
}
#content .lowerbox .dashboard_title h1 {
  align-items: center;
}
#content .lowerbox .dashboard {
  flex: 1;
  display: flex;
  justify-content: center;
  width: 100%;
  // background-image: url('../assets/images/show.44061eb4.png');
  background-size: 100% 100%;
  height: 100%;
}

// #content .lowerbox .audio {
//     width: 30%;
//     height: 100%;
//     background-color: beige;
// }
#content .dashboardBox {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 31.5%;
  height: 100%;
  margin-left: 45.5px;
  // background-image: url('../assets/images/main_middle.png');
  // background-size: 100% 100%;
}
#content .audioBigBox #audioBoom {
  // height: auto;
  position: absolute;
  top: 5px;
  // left: 10px;
  right: 5px;
}
.lowerbox {
  width: 100%;
  height: 100px;
  // background-color: #190606;
}

#content .lowerbox button {
  position: absolute;
  left: 13px;
  top: 60px;
  width: 60px;
  height: 35px;
  border-radius: 10px 10px 10px 10px;
  background-image: url("../assets/images/btnBack.ae3bd2e8.png");
  background-size: 96% 99%;
}

#content .dropdown {
  position: absolute;
  position: relative;
  display: block;
  right: 144px;
  margin-right: 16px;
}

#content .dropdown-data-style {
  position: absolute;
  top: -60px;
  left: -20px;
  display: flex;
  flex-direction: column;
  background-color: #faf4f6;
  min-width: 450px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.16);
  overflow: scroll;
  height: 250px;
  // margin-top: 33px
}

#content .dropdown-data-style li {
  // color: rgb(236, 223, 223);
  cursor: pointer;
  padding: 12px 6px;
  text-decoration: none;
  border-bottom: 1px solid #190606;
}
</style>